<script lang="ts" setup>
const bgImg = "https://shq.qdjqy.cn/profile/0911/suggest/bg.png"
const bgTitle = "https://shq.qdjqy.cn/profile/0911/recommendWay/bg_title.png"
const pic1 = "https://shq.qdjqy.cn/profile/0911/index/pic1.png"
const pic2 = "https://shq.qdjqy.cn/profile/0911/index/pic2.png"
const pic3 = "https://shq.qdjqy.cn/profile/0911/index/pic3.png"
const pic4 = "https://shq.qdjqy.cn/profile/0911/index/pic4.png"
const pic5 = "https://shq.qdjqy.cn/profile/0911/index/pic5.png"

definePage({
  style: {
    navigationStyle: 'custom'
  },
})

function handleClickLeft() {
  uni.navigateBack({
    delta: 1
  })
}

interface Coupon {
  id: number,
  image: string,
  title: string,
  time: string,
  count: number,
  price: number
}

// normal 待出游、 used 已出游 、 cancel 已取消
const reservedList = reactive<Coupon[]>([
  { id: 1, image: pic1, title: '第一站，在济南老城开起多彩奇 趣之旅！', time: '10:00-22:00', count: 1, price: 109},
  { id: 2, image: pic2, title: '第二站，人人都说沂蒙山好，那 就去沂蒙山看看！', time: '10:00-22:00', count: 2, price: 309},
  { id: 3, image: pic3, title: '第三站，想要玩转淄博，跟上我 们的步伐就对了！', time: '10:00-22:00', count: 2, price: 99},
  { id: 4, image: pic4, title: '最适合放风筝的季节，当然要去 潍坊玩！', time: '10:00-22:00', count: 2, price: 101},
  { id: 5, image: pic5, title: '去聊城吧，不仅有古韵美景，还 能跟着“侦探狄仁杰”连吃三...', time: '10:00-22:00', count: 2, price: 5},
  { id: 6, image: pic4, title: '历史底蕴与文化魅力并存的枣庄， 不能错过的宝藏旅行目的地 ！', time: '10:00-22:00', count: 2, price: 101},
  { id: 7, image: pic5, title: '“好客山东一码通”赏花攻略新 鲜出炉！', time: '10:00-22:00', count: 2, price: 5}
])

</script>

<template>
  <view class="film-container">
    <view class="film-bg"></view>
    <wd-navbar left-text="推荐路线" left-arrow @click-left="handleClickLeft" custom-class="wd-color"
      custom-style="background-color: transparent !important;" safeAreaInsetTop></wd-navbar>

    <view class="goodlist">
      <view class="cantent flex" v-for="(itm, idx) in reservedList" :key="idx">
        <image class="head_img" :src="itm['image']" mode="aspectFill"></image>
        <view class="right">
          <view class="good-content">
            <image :src="bgTitle" class="good-content-img" mode="aspectFill"></image>
            <view class="good-content-text">购卡之后这么玩，一趟回本</view>
          </view>
          <view class="good_tltle">{{itm['title']}}</view>
        </view>
      </view>
      <view class="bottom_loading">已经到底啦~</view>
      <view style="height: 20rpx;"></view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.film-container {
  position: relative;
  & .film-bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    background: linear-gradient(to bottom, #BF9763, #ffffff);
    height: 500rpx;
    width: 750rpx;
  }
  
  & .goodlist {
    width: 710rpx;
    margin: 30rpx auto;
    border-radius: 20rpx;
    background-color: rgba($color: #ffffff, $alpha: 0.4);
    & .cantent {
      padding: 30rpx 20rpx;
      position: relative;
      & .head_img {
        border-radius: 20rpx;
        width: 260rpx;
        height: 200rpx;
      }
      & .right {
        margin-left: 15rpx;
        width: 430rpx;
        height: 200rpx;
        position: relative;
        & .good_tltle {
          padding: 20rpx 0;
          font-size: 34rpx;
          font-weight: 700;
        }
        & .good-content {
          position: relative;
          & .good-content-img {
            width: 400rpx;
            height: 70rpx;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -2;
          }
          & .good-content-text {
            padding-left: 20rpx;
            font-size: 26rpx;
            color: #6D2E19;
            line-height: 70rpx;
          }
        }
      }

        // <view class="right">
        //   <view class="good-content">
        //     <image :src="bgTitle" class="good-content-img"></image>
        //     <view class="good-content-text">购卡之后这么玩，一趟回本</view>
        //   </view>
    }
    & .bottom_loading {
      width: 750rpx;
      text-align: center;
      line-height:80rpx;
      color: #aaa;
    }
  }

  :deep() {
    .wd-navbar__text  {
      color: #fff;
    }
    .wd-navbar__arrow {
      color: #fff;
    }

  }
}
</style>
